<template>
	<view class="animated fadeIn faster">
		<view class="d-flex d-flex-wrap d-flex-between px-2 pt-2 mb-3">
			<!-- <view class="d-flex d-flex-between d-flex-wrap">
				<view class="d-flex d-flex-column d-flex-middle mb-3" v-for="hobby in hobbyList" :key="hobby.id" @click="selectHobby(hobby.id)">
					<image class="hobby-img" :src="hobby.icon"></image>
					<text class="font26" :style="{ 'color': this.selectIds.includes(hobby.id) ? '#fa2c19' : '#999'}">{{hobby.name}}</text>
				</view>
			</view> -->
			<view class="gameItem d-flex-column d-flex-middle mt-2" v-for="(hobby, index) in hobbyList" :key="hobby.id" @click="selectHobby(index)">
				<view class="position-relative" style="width: 100%;">
					<image :src="hobby.icon" mode="widthFix" style="width: 100%;"></image>
					<view v-if="!hobby.checked" class="position-absolute rounded d-flex-btn" style="width: 30rpx; height: 30rpx; background: #c5cad0; top: -18rpx; right: -18rpx;">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/add.png" style="width: 18rpx; height: 18rpx;"></image>
					</view>
					<view v-else class="position-absolute rounded d-flex-btn" style="width: 30rpx; height: 30rpx; background: #18c3ff; top: -18rpx; right: -18rpx;">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/checked.png" style="width: 18rpx; height: 18rpx;"></image>
					</view>
				</view>
				<view class="gameText">{{hobby.name}}</view>
			</view>
			<uni-load-more iconType="circle" :status="loading" />
		</view>
		<view style="height: 120rpx;"></view>
		<view class="fix-bottom bg-f8">
			<view class="px-3 py-2 pb-4">
				<view class="fix-btn py-2 d-flex d-flex-center d-flex-middle colorfff" @click="gotoIndexPage">开始寻找你的搭子
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import { cardApi } from '@/http/cardApi.js'
  import {FIRST_LOGIN} from '@/constants/local-storage-key-const';
  import {userApi} from "@/http/userApi";
  import { DictionaryApi } from '../../http/dictionary';
  import {manner} from "@/util/manner";
	export default {
		data() {
			return {
				hobbyList: [],
				selectIds: [],
				loading: false,
				max: false,
				params: {
					pageIndex: 1,
					pageSize: 28,
				}
			}
		},
		methods: {
			async gotoIndexPage() {
				if (this.selectIds.length < 3) {
					uni.showToast({
						title: '兴趣爱好至少选三个哦',
						icon: 'none',
					})
				} else {
					try{
						await userApi.editUserInfo({
							favorGameLabel: this.selectIds.join(','),
						})
						uni.reLaunch({
							url:'/pages/index/index'
						})
					}catch(e){
						console.log('e',e)
					}
				}
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			async getHobbyList() {
				if (this.loading) return;
				this.loading = true;
				let data = await DictionaryApi.GameList(this.params)
				if(data.records.length < data.size) {
					this.max = true
				}
				data.records.forEach(item => {
					item.checked = false
				})
				this.hobbyList = this.hobbyList.concat(data.records)
				this.loading = false;
			},
			selectHobby(dex) {
				if (this.selectIds.length >= 4 && this.hobbyList[dex].checked===false) {
					uni.showToast({
						title: '兴趣爱好最多选四个哦',
						icon: 'none'
					})
					return
				} else {
					this.hobbyList[dex].checked = !this.hobbyList[dex].checked
					if(this.hobbyList[dex].checked) {
						this.selectIds.push(this.hobbyList[dex].id)
					} else {
						this.selectIds.forEach((i, idx) => {
							if(i == this.hobbyList[dex].id) {
								this.selectIds.splice(idx, 1)
							}
						})
					}
				}
			}
		},
		onReachBottom() {
			if(!this.max) {
				this.params.pageIndex++
				this.getHobbyList()
			}
		},
		mounted() {
			this.getHobbyList()
		}
	}
</script>

<style scoped lang="scss">
.hobby-img {
	width: 160rpx;
	height: 160rpx;
	margin-bottom: 10rpx;
	border-radius: 50rpx;
}

.fix-bottom {
	position: fixed;
	z-index: 98;
	bottom: 0;
	left: 0;
	right: 0;
}

.fix-btn {
	background-image: linear-gradient(to right, #e65fd0, #69adf8);
	border-radius: 40rpx;
}
.gameLabel {
	background: #f4f5fa;
	width: 175rpx;
	text-align: center;
	line-height: 80rpx;
	height: 80rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	overflow:hidden;
	-webkit-line-clamp: 1; //多行在这里修改数字即可
	-webkit-box-orient: vertical;
}
.gameItem {
	width: calc(25% - 12px);
	margin-right: 12px;
	.gameText {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		overflow:hidden;
		-webkit-line-clamp: 1; //多行在这里修改数字即可
		-webkit-box-orient: vertical;
		padding: 0 10rpx;
	}
}
.gameItem:nth-child(4n) {
	margin-right: 0;
}
.gameItem:last-child:nth-child(4n + 2) {
	margin-right: calc((100% - 25%) / 3 * 2);
}
.gameItem:last-child:nth-child(4n + 3) {
	margin-right: calc((100% - 25%) / 3 * 1);
}
</style>